<template>
  <view>
    <view class="skip">
      <view @click="skip">
        跳过
      </view>
    </view>
    <swiper class="swiper" :indicator-dots='false' indicator-color="#fff" indicator-active-color='#ccc' :circular='true'
      :autoplay='true' :interval='3000' :duration='1000'>
      <!-- 循环 -->
      <swiper-item style="height: 100vh;">
        <view class="img">
          <image :src="IMGLink + imgUrl" mode="widthFix"></image>
        </view>
      </swiper-item>

    </swiper>
  </view>
</template>

<script>
  import {
    listAdvertisementsOnMobile
  } from '@/api/login.js'
  export default {
    data() {
      return {
        imgUrl: '',
        time: null,
        IMGLink: this.$url
      }
    },
    onLoad() {
      this.list();
    },
    methods: {
      list() {
        listAdvertisementsOnMobile('/selectUrl', 'get')
          .then((res) => {
            if (res.data) {
              this.imgUrl = res.data.url;

              this.time = setTimeout(() => {
                uni.switchTab({
                  url: '../home/home'
                })
              }, res.data.duration * 1000);
            } else {
              uni.switchTab({
                url: '../home/home'
              })
            }
          }).catch(err => {
            this.$Toast.error(err.message);
          })
      },
      skip() {
        uni.switchTab({
          url: '../home/home'
        })
        clearTimeout(this.time)
      }
    }
  }
</script>

<style lang="less">
  .skip {
    width: 100%;
    position: absolute;
    text-align: right;
    z-index: 2;
    display: flex;
    justify-content: flex-end;

    view {
      width: 100rpx;
      height: 50rpx;
      border-radius: 25rpx;
      background-color: #000000;
      opacity: 0.5;
      line-height: 50rpx;
      font-size: 24upx;
      color: #fff;
      text-align: center;
      margin: 20rpx;
    }
  }

  .img {
    width: 100%;
    height: 100vh;
  }

  image {
    width: 100%;
    height: 100vh;
  }

  .swiper {
    height: 100vh;
  }
</style>
